<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部项目</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script>
        window.$ = window.jQuery = require("jquery")
    </script>
    <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <style type="text/css">
        body {
            margin: 0 10px 0 80px;
            height: auto;
        }
        .lead th {
            vert-align: middle;
            font-size: x-large;
            text-align: center;
        }
        .lead th a {
            color: silver;
            line-height: 60px;
        }
        .lead th img {
            width: 70px;
            height: 60px;
        }
        .project {
            margin-bottom: 40px;
        }
        .project img {
            height: 250px;
            width: 100%;
        }
        .project h3 {
            margin-top: 30px;
            margin-bottom: 30px;
            letter-spacing: 2px
        }
        .col-lg-4 {
            border-style: solid;
            border-width: thin;
            border-color: cornsilk;
            text-align: center;
            margin-bottom: 10px;
            margin-top: 20px;
        }
        .project p {
            color: darkgrey;
        }
        .content {
            height: 150px;
        }
        .c-circle {
            width: 70px;
            height: 70px;
            background-color: orangered;
            border-radius: 50%;
            float: left;
            margin-left: 20px;
            border-width: 9px;
            border-color: orange;
            border-style: solid;
            text-align: center;
            color: white;
            line-height: 50px;
        }
        .process {
            height: 100px;
        }
        .money {
            color: forestgreen;
        }
        .aim {
            line-height: 70px;
        }
        .status {
            height: 40px;
            text-align: left;
            letter-spacing: 2px;
            font-size: large;
        }
        .status b {
            color: black;
        }
        .explore_more {
            width: 100%;
            background-color: chocolate;
            height: 40px;
            text-align: center;
        }
        .explore_more a {
            color: white;
            letter-spacing: 2px;
            line-height: 35px;
        }
    </style>
</head>
<body>
<table class="table table-dark lead" style="margin-bottom: 0;">
    <thead>
    <tr>
        <th><img src="src/assets/images/sign.jpeg"></th>
        <th><a href="home.html">主界面</a> </th>
        <th ><a href="explore.html">更多项目</a> </th>
        <th ><a href="identification.html">发起募捐</a> </th>
        <th><a href="user.html"><img src="src/open-iconic-master/svg/person.svg" alt="no image"></a></th>
    </tr>
    </thead>
</table>
<div class="container-fluid project">
    <div class="row">
        <div class="col-lg-4">
            <img src="src/assets/images/ac1.jpeg">
            <div class="content">
                <h3 >乡村教学活动</h3>
                <p>授人以鱼，不如授人以渔。带领农村脱贫致富从教育抓起！为教学设施献上一份力</p>
            </div>
            <div class="process">
                <div class="c-circle">
                    8 %
                </div>
                <span class="aim">目标 <span class="money">￥20000</span> , 已募集 <span class="money">￥1600</span></span>
            </div>
            <hr>
            <div class="status">
                <p><b>募集状态：</b>进行中</p>
            </div>
            <div class="explore_more">
                <a href="">了解更多</a>
            </div>
        </div>
        <div class="col-lg-4">
            <img src="src/assets/images/ac2.jpeg">
            <div class="content">
                <h3>白血病患者关怀计划</h3>
                <p>病魔并不可怕，因为我们是患者坚强的后盾！为患者，医疗基金献上一份力</p>
            </div>
            <div class="process">
                <div class="c-circle">
                    12%
                </div>
                <span class="aim">目标 <span class="money">￥20000</span> , 已募集 <span class="money">￥2400</span> </span>
            </div>
            <hr>
            <div class="status">
                <p><b>募集状态：</b>进行中</p>
            </div>
            <div class="explore_more">
                <a href="">了解更多</a>
            </div>
        </div>
        <div class="col-lg-4">
            <img src="src/assets/images/ac3.jpeg">
            <div class="content">
                <h3>留守儿童关怀计划</h3>
                <p>呵护祖国的花朵，让他们感受家的温暖</p>
            </div>
            <div class="process">
                <div class="c-circle">
                    10 %
                </div>
                <span class="aim">目标 <span class="money">￥30000</span> , 已募集 <span class="money">￥3000</span></span>
            </div>
            <hr>
            <div class="status">
                <p><b>募集状态：</b>进行中</p>
            </div>
            <div class="explore_more">
                <a href="">了解更多</a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <img src="src/assets/images/ac1.jpeg">
            <div class="content">
                <h3 >乡村教学活动</h3>
                <p>授人以鱼，不如授人以渔。带领农村脱贫致富从教育抓起！为教学设施献上一份力</p>
            </div>
            <div class="process">
                <div class="c-circle">
                    8 %
                </div>
                <span class="aim">目标 <span class="money">￥20000</span> , 已募集 <span class="money">￥1600</span></span>
            </div>
            <hr>
            <div class="status">
                <p><b>募集状态：</b>进行中</p>
            </div>
            <div class="explore_more">
                <a href="">了解更多</a>
            </div>
        </div>
        <div class="col-lg-4">
            <img src="src/assets/images/ac2.jpeg">
            <div class="content">
                <h3>白血病患者关怀计划</h3>
                <p>病魔并不可怕，因为我们是患者坚强的后盾！为患者，医疗基金献上一份力</p>
            </div>
            <div class="process">
                <div class="c-circle">
                    12%
                </div>
                <span class="aim">目标 <span class="money">￥20000</span> , 已募集 <span class="money">￥2400</span> </span>
            </div>
            <hr>
            <div class="status">
                <p><b>募集状态：</b>进行中</p>
            </div>
            <div class="explore_more">
                <a href="">了解更多</a>
            </div>
        </div>
        <div class="col-lg-4">
            <img src="src/assets/images/ac3.jpeg">
            <div class="content">
                <h3>留守儿童关怀计划</h3>
                <p>呵护祖国的花朵，让他们感受家的温暖</p>
            </div>
            <div class="process">
                <div class="c-circle">
                    10 %
                </div>
                <span class="aim">目标 <span class="money">￥30000</span> , 已募集 <span class="money">￥3000</span></span>
            </div>
            <hr>
            <div class="status">
                <p><b>募集状态：</b>进行中</p>
            </div>
            <div class="explore_more">
                <a href="">了解更多</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>